<template>
	<view class="userinfo">
		<view class="user-section">
			<image class="bg" src="/static/user-bg2.jpg"></image>
			<text class="bg-upload-btn yticon icon-paizhao"></text>
		</view>
		<view class="input-content">
			<form @submit="toCardExchange">
				<view class="input-item">
					<text class="tit">充值卡</text>
					<input
						type="text"
						name="card"
						placeholder="请输入充值卡号"
					/>
				</view>
				<view class="input-item">
					<text class="tit">密码</text>
					<input
						type="text"
						name="pwd"
						placeholder="请输入充值卡密码"
					/>
				</view>
				<button class="confirm-btn" formType="submit">提交</button>
			</form>
		</view>
		
		<!--加载动画-->
		<rf-loading v-if="loading"></rf-loading>
		
    <!--进度条加载-->
		<rf-load-progress :height="CustomBar" :progress="loadProgress"></rf-load-progress>
	</view>
</template>

<script>
	
	import {cardExchange} from '@/api/product';
	const graceChecker = require('@/common/graceChecker.js');
	import avatar from '@/components/rf-avatar/rf-avatar';
	import moment from '@/utils/moment';
	export default {
		components: { avatar },
		data() {
			return {
				loadProgress: 0,
				CustomBar: this.CustomBar,
				token: null,
				loading: true
			};
		},
		onLoad () {
			this.initData()
		},
		methods: {
			
			// 数据初始化
			initData(){
		    this.token = uni.getStorageSync('accessToken') || undefined;
			    this.loading = false;
				if (!this.token) {
					uni.navigateTo({
						url: "/pages/public/login",
					})
				}
			},
			async toCardExchange(e){
				this.loading = true;
				const formData = e.detail.value;
				let rule = [
					{name:"card", checkType : "notnull" ,checkRule:"5,18",  errorMsg:"请输入正确的卡号"},
					{name:"pwd", checkType : "notnull" ,checkRule:"6,10",  errorMsg:"请输入正确的密码"}
				];
				const checkRes = graceChecker.check(formData, rule);
				if(!checkRes){
					this.loading = false;
					this.$api.msg(graceChecker.error);
					return;
				}
				this.exchange(formData);
			},
			async exchange(formData){
				this.loadProgress = this.loadProgress + 6;
				const timer = setInterval(() => {
						this.loadProgress = this.loadProgress + 6;
				}, 50);
				await this.$put(`${cardExchange}`, {
					...formData
				}).then(r =>{
				    clearInterval(timer);
					    this.loading = false;
						this.loadProgress = 0;
				    this.$api.msg(r.data.msg);
					if(r.data.code==0){
						uni.navigateTo({
						    url: '/pages/user/dishbox'
						});
					}
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $page-color-bg;
	}
	.userinfo{
		.user-section{
			display:flex;
			align-items:center;
			justify-content: center;
			height: 300upx;
			padding: 40upx 30upx 0;
			overflow: hidden;
			position:relative;
			.bg{
				position:absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				filter: blur(1px);
				opacity: .7;
			}
			.portrait-box{
				clear: both;
				z-index: 2;
			}
			.portrait{
				position: relative;
				width: 200upx;
				height: 200upx;
				border-radius: 50%;
	      border: 6upx solid #fff;
			}
			.yticon{
				position:absolute;
				line-height: 1;
				z-index: 5;
				font-size: 48upx;
				color: #fff;
				padding: 4upx 6upx;
				border-radius: 6upx;
				background: rgba(0,0,0,.4);
			}
			.pt-upload-btn{
				right: 0;
				bottom: 10upx;
			}
			.bg-upload-btn{
				right: 20upx;
				bottom: 16upx;
			}
		}
		.input-content{
			padding: 40upx 60upx;
			.input-item{
				display:flex;
				padding: 0 30upx;
				background: $page-color-light;
				height: 80upx;
				line-height: 80upx;
				border-radius: 4px;
				margin-bottom: 30upx;
				&:last-child{
					margin-bottom: 0;
				}
				.tit{
					width: 90upx;
					font-size: $font-sm+2upx;
					color: $font-color-base;
				}
				input {
					height: 80upx;
					line-height: 80upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}
				.date {
					height: 80upx;
					line-height: 80upx;
					font-size: $font-base + 2upx;
					color: $font-color-dark;
				}
				.gender {
					margin: 10upx 0;
					color: $font-color-dark;
					font-size: $font-base;
					.gender-item {
						margin-right: 10upx;
						.gender-item-text {
							padding: 0 5upx;
						}
						radio .wx-radio-input.wx-radio-input-checked {
							background: $uni-color-primary;
							border-color: $uni-color-primary;
						}
					}
				}
			}
			.confirm-btn{
				width: 630upx;
				height: 76upx;
				line-height: 76upx;
				border-radius: 50px;
				margin-top: 50upx;
				background: $uni-color-primary;
				color: #fff;
				font-size: $font-lg;
				&:after{
					border-radius: 100px;
				}
			}
		}
	}
</style>
